import React, {Component} from 'react';
import {
    FlatList,
    Text,
    View,
    Image,
    TouchableHighlight,
    Dimensions,
    Button,
    ScrollView,
    TouchableOpacity,
    TextInput
} from 'react-native';
import {Header} from '../common/header';

export class Buy extends React.Component {
    constructor() {
        super();
        this.state = {longText: '', longTextLength: 0};
    }

    titleItem() {
        return (
            <Text style={{color: '#fff', textAlign: 'center', fontSize: 24}}>发布出售信息</Text>
        )
    }

    leftItem() {
        return (
            <TouchableOpacity onPress={() => {
                this.props.navigation.goBack()
            }}>
                <Image
                    source={require('../../assets/img/back.png')}
                    resizeMode='contain'
                    style={{width: 24, height: 24, marginTop: 4}}
                />
            </TouchableOpacity>
        )
    }

    render() {
        const {navigate} = this.props.navigation;
        return (
                <View>
                    <Header
                        titleItem={() => this.titleItem()}
                        leftItem={() => this.leftItem()}
                    />
                    <ScrollView style={{marginBottom:70}}>
                    <View style={[style.item]}>
                        <View style={style.itemText}>
                            <Text style={style.line}></Text>
                            <Text style={style.titletext}>产品详情</Text>
                        </View>
                        <View style={style.inputs}>
                            <View style={style.detailInput}>
                                <View>
                                    <Text style={style.redX}>*</Text>
                                    <Text>产品名称:</Text>
                                </View>
                                <View style={{width: (Dimensions.get('window').width) / 2 - 100}}>
                                    <TextInput underlineColorAndroid="transparent" placeholder="触摸输入"></TextInput>
                                </View>
                            </View>
                            <View style={style.detailInput}>
                                <View>
                                    <Text style={{color: 'red', position: 'absolute', left: -8, top: 0}}>*</Text>
                                    <Text>产品数量:</Text>
                                </View>
                                <View style={{width: (Dimensions.get('window').width) / 2 - 120}}>
                                    <TextInput underlineColorAndroid="transparent" keyboardType="numeric"
                                            placeholder="触摸输入"></TextInput>
                                </View>
                                <View>
                                    <Text>吨</Text>
                                </View>
                            </View>
                        </View>
                        <View style={style.inputs}>
                            <View style={style.detailInput}>
                                <View>
                                    <Text style={style.redX}>*</Text>
                                    <Text>所在地区:</Text>
                                </View>
                                <View style={{width: (Dimensions.get('window').width) / 2 - 130}}>
                                    <TextInput underlineColorAndroid="transparent" placeholder="触摸输入"></TextInput>
                                </View>
                                <View>
                                    <Text>市</Text>
                                </View>
                            </View>
                            <View style={style.detailInput}>
                                <View>
                                    <Text>产品价格:</Text>
                                </View>
                                <View style={{width: (Dimensions.get('window').width) / 2 - 160}}>
                                    <TextInput keyboardType="numeric" underlineColorAndroid="transparent"
                                            placeholder="输入"></TextInput>
                                </View>
                                <View>
                                    <Text>元/面议/电仪</Text>
                                </View>
                            </View>
                        </View>
                        <View style={style.inputs}>
                            <View style={style.detailInput}>
                                <View>
                                    <Text style={style.redX}>*</Text>
                                    <Text>产品规格:</Text>
                                </View>
                                <View style={{width: (Dimensions.get('window').width) / 2 - 130}}>
                                    <TextInput underlineColorAndroid="transparent" placeholder="触摸输入"></TextInput>
                                </View>
                            </View>
                        </View>
                    </View>

                    <View style={[style.item]}>
                        <View style={style.itemText}>
                            <Text style={style.line}></Text>
                            <Text style={style.titletext}>产品描述</Text>
                        </View>
                        <View>
                            <TextInput underlineColorAndroid="transparent" multiline={true} maxLength={100}
                                    placeholder="触摸输入" onChangeText={(text) => {
                                this.setState({longText: text, longTextLength: text.length})
                            }}/>
                        </View>
                        <View style={style.number}>
                            <Text>{this.state.longTextLength}/100</Text>
                        </View>
                    </View>
                    <View style={style.contacts}>
                        <View style={style.contactsItem}>
                            <View style={{width: 100}}>
                                <Text>联系人:</Text>
                            </View>
                            <View style={{width: 200}}>
                                <TextInput underlineColorAndroid="transparent" placeholder="请输入"/>
                            </View>
                        </View>
                        <View style={style.contactsItem}>
                            <View style={{width: 100}}>
                                <Text>联系人电话:</Text>
                            </View>
                            <View style={{width: 200}}>
                                <TextInput underlineColorAndroid="transparent" placeholder="请输入"/>
                            </View>
                        </View>
                        <View style={style.contactsItem}>
                            <View style={{width: 100}}>
                                <Text>微信:</Text>
                            </View>
                            <View style={{width: 200}}>
                                <TextInput underlineColorAndroid="transparent" placeholder="请输入"/>
                            </View>
                        </View>
                    </View>
                    <View style={style.upload}>
                        <View style={style.uploadItem}>
                            <Text>
                                添加
                            </Text>
                        </View>
                    </View>
                    <View style={style.submitBtn}>
                        <TouchableOpacity  style={style.Btn}>
                            <Text style={style.BtnText}>发布</Text>
                        </TouchableOpacity>
                    </View>
                    </ScrollView>
            </View>
        )
    }
}

const style = {
    item: {
        marginBottom: 10,
        paddingVertical: 15,
        minHeight: 200,
        backgroundColor: '#fff',
    },
    titletext: {
        textAlign: 'center',
        backgroundColor: '#fff',
        paddingLeft: 10,
        paddingRight: 10,
    },
    itemText: {
        // lineHeight:20,
        zIndex: 10,
        position: 'relative',
        justifyContent: 'center',
        alignItems: 'center',
    },
    line: {
        zIndex: 0,
        position: 'absolute',
        // top:10,
        height: 2,
        width: Dimensions.get('window').width - 100,
        borderBottomWidth: 1,
        borderBottomColor: "#ddd",

    },
    detailInput: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 30,
    },
    redX: {
        color: 'red',
        position: 'absolute',
        left: -8,
        top: 0
    },
    inputs: {
        flexDirection: 'row',
        justifyContent: 'flex-start'
    },
    number: {
        position: 'absolute',
        right: 5,
        bottom: 5,
    },
    contacts: {
        backgroundColor: '#fff',
        marginBottom:10
    },
    contactsItem: {
        paddingVertical: 5,
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        paddingLeft: 20,
        alignItems: 'center',
    },
    upload:{
        backgroundColor:'#fff',
        paddingVertical:8,
        paddingLeft:10,
        paddingRight:10,
    },
    uploadItem:{
        borderColor:'#ddd',
        borderWidth:1,
        borderStyle:'dashed',
        height:100,
        width:100,
        alignItems: 'center',
        justifyContent: 'center',
    },
    submitBtn:{
        paddingVertical:20,
        alignItems: 'center',
        justifyContent: 'center',
    },
    Btn:{
        backgroundColor:'#43A2D8',
        borderRadius:50,
        width:200,
        paddingVertical:10,
    },
    BtnText:{
        color:'#fff',
        textAlign:'center',
        fontSize:30
    },
    scorll:{
        height:Dimensions.get('window').height - 70, 
    }
}